<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width'>
	<link rel="stylesheet" type="text/css" href="css/waterflow.css">
</head>
<body>
	<div id='content'>
		<div class='box'>
			<div class='img_border'>
				<img src="img/1.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/2.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/3.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/4.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/5.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/6.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/7.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/8.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/9.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/10.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/1.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/2.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/3.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/4.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/5.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/6.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/7.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/8.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/9.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/10.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/1.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/2.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/3.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/4.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/5.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/6.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/7.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/8.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/9.jpg">
			</div>
		</div>
		<div class='box'>
			<div class='img_border'>
				<img src="img/10.jpg">
			</div>
		</div>
		<div class='box'>
				<div class='img_border'>
					<img src="img/1.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/2.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/3.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/4.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/5.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/6.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/7.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/8.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/9.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/10.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/1.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/2.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/3.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/4.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/5.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/6.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/7.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/8.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/9.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/10.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/1.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/2.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/3.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/4.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/5.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/6.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/7.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/8.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/9.jpg">
				</div>
			</div>
			<div class='box'>
				<div class='img_border'>
					<img src="img/10.jpg">
				</div>
			</div>
	</div>

	<script type="text/javascript">

	// window.onload = function(){
	// 	var w = new waterflow(),
	// 	    imgsData = {
	// 				    	'data':[
	// 						    	{'src' : '1.jpg'},
	// 						    	{'src' : '2.jpg'},
	// 						    	{'src' : '3.jpg'},
	// 						    	{'src' : '4.jpg'},
	// 						    	{'src' : '5.jpg'},
	// 						    	{'src' : '6.jpg'},
	// 						    	{'src' : '7.jpg'},
	// 						    	{'src' : '8.jpg'},
	// 						    	{'src' : '9.jpg'},
	// 						    	{'src' : '10.jpg'}
	// 						    	]
	// 				    };
	// 	w.imagesLayout('content');
	// 	window.onscroll = function(){
	// 		if(w.isLoad()){
	// 			for(var i = 0; i < imgsData.data.length; i++){
	// 				var box = document.createElement('div'),
	// 					imgBorder = document.createElement('div'),
	// 					img = document.createElement('img');
	// 				box.className = 'box';
	// 				imgBorder.className='img_border';
	// 				document.getElementById('content').appendChild(box);
	// 				box.appendChild(imgBorder);
	// 				img.src = 'img/' + imgsData.data[i].src;
	// 				imgBorder.appendChild(img);
	// 			}
	// 		}
	// 		w.imagesLayout('content');
	// 	}
	// }

	// var waterflow = function(){};
	// waterflow.prototype = {
	// 	getImages : function(parentId){
	// 	var boxs = document.getElementById(parentId).getElementsByClassName('box');
	// 	return boxs;
	// 	},

	// 	imagesLayout : function(parentId){
	// 		var images = this.getImages(parentId);
	// 			boxWidth = images[0].offsetWidth,
	// 		    boxHeight = [],
	// 		    num = Math.floor(document.documentElement.clientWidth / boxWidth),
	// 		    minHeight = images[0].offsetHeight
	// 		    minIndex = 0,
	// 		    imgLeft = 0;
	// 		    document.getElementById('content').style.cssText = 'width:' + num * boxWidth + 'px;margin:0 auto;';
	// 		    for(var i = 0; i < images.length; i++){
	// 		    	if(i < num){
	// 			    	boxHeight[i] = images[i].offsetHeight;
	// 		    	}else{
	// 		    		minHeight = Math.min.apply(null,boxHeight);
	// 		    		minIndex = boxHeight.indexOf(minHeight);
	// 		    		imgLeft = images[minIndex].offsetLeft;
	// 		    		images[i].style.position = 'absolute';
	// 		    		images[i].style.top = minHeight + 'px';
	// 		    		images[i].style.left = imgLeft + 'px';
	// 		    		boxHeight[minIndex] += images[i].offsetHeight;
	// 		    	}
	// 		    }
	// 	},

	// 	isLoad : function(){
	// 		var images = this.getImages('content'),
	// 		    lastImgHeight = images[images.length - 1].offsetTop,
	// 		    scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
	// 		    clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
	// 		    if(lastImgHeight < scrollTop + clientHeight){
	// 		    	return true;
	// 		    }else{
	// 		    	return false;
	// 		    }
	// 	}
	// }

	








	window.onload = function(){
		var w = new waterflow('content','box');
		var boxHeight = w.getBoxHeight();
		window.onscroll = function(){
				w.imgLoad(boxHeight);
		}
	}

	var waterflow = function(parentId,childClass){
		this.parentId = parentId;
		this.childClass = childClass;
		this.imgData = {
			'data':[
					{'src': '1.jpg'},
					{'src': '2.jpg'},
					{'src': '3.jpg'},
					{'src': '4.jpg'},
					{'src': '5.jpg'},
					{'src': '6.jpg'},
					{'src': '7.jpg'},
					{'src': '8.jpg'},
					{'src': '9.jpg'},
					{'src': '10.jpg'}
			]
		};
	};

	waterflow.prototype = {

		getBox : function(){
			var box = document.getElementById(this.parentId).getElementsByClassName(this.childClass);
			return box;
		},

		//存放第一排图片的高度
		getBoxHeight : function(){
			var imgBox = this.getBox(),
				boxWidth = imgBox[0].offsetWidth,
				num = Math.floor(document.documentElement.clientWidth / boxWidth),
				boxHeight = [],
				minHeight,
				minIndex;
				document.getElementById(this.parentId).style.cssText = 'width: ' + num * boxWidth + 'px; margin:0 auto;';
				for(var i = 0; i < num; i++){
					boxHeight[i] = imgBox[i].offsetHeight;
				}
				var height = this.getMinHeight(boxHeight);
				this.imageLayout(imgBox,num,height,boxHeight,imgBox.length - num);
				return boxHeight;
		},

		//获取boxHeight中最小值及该下标
		getMinHeight : function(bHeight){
			var boxHeight = bHeight,
				height = [{'minHeight' : '0','minIndex' : '0'},{'maxHeight' : '0','maxIndex' : '0'}];
			height[0].minHeight = Math.min.apply(null,boxHeight);
			height[0].minIndex = boxHeight.indexOf(height[0].minHeight);
			height[1].maxHeight = Math.max.apply(null,boxHeight);
			height[1].maxIndex = boxHeight.indexOf(height[1].maxHeight);
			return height;
		},

		imageLayout : function(imgBox,num,height,boxHeight,increment){
			for(var i = 0; i < increment; i++){
				imgBox[num].style.position = 'absolute';
				imgBox[num].style.top = height[0].minHeight +'px';
				imgBox[num].style.left = imgBox[height[0].minIndex].offsetLeft + 'px';
				boxHeight[height[0].minIndex] += imgBox[num++].offsetHeight;
				height = this.getMinHeight(boxHeight);
			}
		},

		isLoad : function(height){
			var box = this.getBox(),
				lastBoxHeight = height[1].maxHeight,
				scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
				clientTop = document.documentElement.clientHeight || document.body.clientHeight;
			if(lastBoxHeight <= (scrollTop + clientTop + 1)){
				return true;
			}
			return false;
		},

		imgLoad : function(boxHeight){
			var height = this.getMinHeight(boxHeight);
			if(this.isLoad(height)){
				var box = this.getBox();
					length = box.length;
				for(var i = 0; i < this.imgData.data.length; i++){
					var parent = document.createElement('div'),
						child = document.createElement('div'),
						image = document.createElement('img');
					parent.className = 'box';
					child.className = 'img_border';
					image.src = 'img/' + this.imgData.data[i].src;
					document.getElementById(this.parentId).appendChild(parent);
					parent.appendChild(child);
					child.appendChild(image);
				}
				this.imageLayout(box,length,height,boxHeight,this.imgData.data.length);
			}
		}
	}
	
	</script>
</body>
</html>